<script>
import {getUserMessage , charge} from '../apis/api'
export default {
  data() {
    return {
      datas: [
        { "id": 1001, "accountName": "现货账户", "money": 108888.88 },
        { "id": 1002, "accountName": "杠杆账户", "money": 18888 },
        { "id": 1003, "accountName": "合约账户", "money": 11112 },
        { "id": 1004, "accountName": "金融账户", "money": 50000 },
        { "id": 1005, "accountName": "量化账户", "money": 0.00 },
        { "id": 1006, "accountName": "支付账户", "money": 0.00 },
        { "id": 1007, "accountName": "轮证账户", "money": 0.00 },
        { "id": 1008, "accountName": "期权账户", "money": 0.00 }
      ],
      BTC:[],
      sum : 188888.88,
      exchangeRate : 7.31,
      btc_sum : 25839.7921,
    }
  },
  mounted(){
    this.getUserMessage()
  },
  methods:{
    //获取用户信息
    getUserMessage(){
      getUserMessage().then(res => {
        //console.log(res)
        this.sum = res.data.data.userBalance
        this.btc_sum = res.data.data.userBalance/this.exchangeRate
      })
    },
    charge(){
      charge().then((res)=>{
        //console.log(res)
        if (res.data.code == 200) {
          this.$message({
          message: '充值成功',
          type: 'success'
        })
        this.getUserMessage()
      }
        else{
          this.$message({
          message: '充值失败',
          type: 'error'
        })
        }
        
        
      })
    }
  }

}
</script>

<template>
  <div class="wallet">
    <div class="header">
      <table class="header_tab01">
        <tr>
          <td id="header_tab01_t1">钱包</td>
          <!--<td id="header_tab01_t2"><img src="../assets/icon/footer-wallet/eye.png" /></td>-->
        </tr>
      </table>
    </div>
    <div class="total_assets">
      <table class="asset_tab01">
        <tr>
          <td style="padding-left: 10px">总资产折合(CNY)</td>
          <td style="text-align: center"><img src="../assets/icon/footer-wallet/position.png" /> GT持仓</td>
          <td style="padding-right: 5px"><img src="../assets/icon/footer-wallet/list.png" /> 账单</td>
        </tr>
      </table>
      <h2>{{ sum }}</h2>
      <p style="margin-top: 5px">={{ btc_sum }} BTC</p>
      <table class="asset_tab02">
        <tr>
          <td style="padding-left: 10px ;height: 25px;">今日收益(CNY)</td>
          <!--<td rowspan="2" style="text-align: right"><span id="sp1"><img
                src="../assets/icon/footer-wallet/increase.png" />资产分析</span></td>-->
        </tr>
        <tr>
          <td style="display: block;padding-left: 10px;margin-top: 5px;">+0.00<span id="sp2">+0.00%</span></td>
        </tr>
      </table>
    </div>
    <div class="midd">
      <select>
        <option>USDT</option>
        <option>other</option>
      </select>
      <input type="text" placeholder="请输入金额"  style="width: 300px;"/>
      <button style="padding: 5px;">一键买币</button>
    </div>
    <div class="list">
      <div class="list_hd">
        <div class="list_div" routerLink="/market" @click="charge"><img src="../assets/icon/chongzhi.png"/>充值</div>
        <div class="list_div" routerLink="/market"><img src="../assets/icon/tixian.png" />提现</div>
        <div class="list_div" routerLink="/market"><img src="../assets/icon/hauzhuan.png" />划转</div>
        <div class="list_div" routerLink="/market"><img src="../assets/icon/hauzhuan.png" />push</div>
      </div>
      <div class="scl">
        <div class="li" v-for="(data,index) in datas" :key="index"  @click="data.id==1001?$router.push('/Account'):$message.error('功能尚未开放')">
          <table>
            <tr id="t1" routerLink="{{data.routerLink}}">
              <td rowspan="2">{{ data.accountName }}</td>
              <!--<td style="text-align: right">{{ data.money }} <span>CNY</span></td>-->
              <td rowspan="2" style="text-align: right;"> > </td>
            </tr>
            <!--<tr id="t2">
              <td style="text-align: right">≈{{ BTC[i] }} <span>BTC</span></td>
            </tr>-->
          </table>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.wallet {
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header {
  width: 500px;
  height: 180px;
  background-color: #E3544C;
}

.header_tab01 {
  width: 95%;
  margin-top: 20px;
}

.header_tab01 img {
  width: 20px;
  height: 20px;
}

#header_tab01_t1 {
  color: #F9FAFC;
  padding-left: 20px;
  width: 80%;
}

#header_tab01_t2 {
  text-align: right;
}

/** total assets */
.total_assets {
  width: 90%;
  height: 160px;
  background-color: white;
  margin: 0 auto;
  margin-top: -22%;
  border-radius: 10px;
  box-shadow: 0px 1px 2px grey;
  overflow: hidden;
}

.asset_tab01 {
  width: 100%;
  font-size: xx-small;
  color: slategray;
  margin-top: 5px;
}

.asset_tab01 img {
  width: 12px;
  height: 12px;

}

h2 {
  margin-left: 15px;
}

.total_assets p {
  margin-top: -10px;
  margin-left: 15px;
  font-size: x-small;
}

.asset_tab02 {
  margin-top: 10px;
  width: 100%;
  font-size: x-small;
}

.asset_tab02 #sp1 {
  opacity: 0.5;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 20px;
  box-shadow: 1px 1px 5px grey;
}

.asset_tab02 #sp2 {
  margin-left: 10px;
  font-size: 10px;
  color: #E53C3D;
}

.asset_tab02 img {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-right: 2px;
}

.midd {
  margin: 0 auto;
  margin-top: 10px;
  box-shadow: 1px 1px 3px grey;
}

.midd select {
  height: 30px;
  border: none;

}

.midd input {
  height: 25px;
  border: none;
  outline: none;
}

.midd button {
  height: 30px;
  border: none;
  background-color: #E53C3D;
  color: #F9FAFC;
}

.list {
  width: 92%;
  height: auto;
  padding-bottom: 20px;
  margin: 0 auto;
  margin-top: 15px;
  background-color: #F4F5F6;
}

.list_hd {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
}

.list_hd img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.list_hd .list_div {
  width: 20%;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  line-height: 40px;
  color: #E53C3D;
  font-size: x-small;
  border: 2px solid red;
}

.scl {
  height: auto;
}

.scl::-webkit-scrollbar {
  display: none;
}

.li {
  margin: 0 auto;
  margin-top: 20px;
  background-color: white;
  width: 95%;
  
  opacity: 0.8;
}

.li table {
  margin: 0 auto;
  margin-top: 20px;
  width: 95%;
  padding: 10px;
  font-size: small;
}

#t2 td {
  font-size: xx-small;
}
</style>
